<template>
  <div class="app-container">
    <el-card class="box-card" style="padding-bottom: 10px">
      <div slot="header" class="clearfix">
        <span>我的填报记录</span>
      </div>

      <el-form :inline="true" :model="queryParams" label-width="68px">
        <el-form-item label="填报时间">
          <el-date-picker
            v-model="fillDate"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-col :xs="24" :sm="16" :md="16" :lg="16" class="pr5">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>我的填报</span>
          </div>
          <el-table v-loading="loading1" :data="resList1" stripe>
            <el-table-column label="填报日期" prop="fillDate" />
            <el-table-column label="具体星期" prop="fillWeek" />
            <el-table-column label="填报情况" prop="fillState">
              <template slot-scope="scope">
                <el-tag
                  :type="
                    scope.row.fillState === '已填报' ? 'primary' : 'danger'
                  "
                  disable-transitions
                  >{{ scope.row.fillState }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="填报工时(H)"
              prop="workHour"
              align="center"
            />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  v-hasPermi="['work:record:view']"
                  @click="handleView(scope.row)"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" class="pl5">
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <span>我参加的项目</span>
          </div>
          <el-table v-loading="loading2" :data="resList2">
            <el-table-column label="项目代码" prop="projectCode" />
            <el-table-column label="项目经理" prop="projectManager" />
            <el-table-column label="当前开发阶段" prop="stageName" />
          </el-table>
        </el-card>
      </el-col>
    </el-card>

    <!-- 我的填报详情 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form :model="form" label-width="80px">
        <div v-for="(item, i) in form.data" :key="i">
          <el-divider />
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目代码">
                <el-input v-model="item.projectCode" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开发阶段">
                <el-input v-model="item.stageName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="事务种类">
                <el-input v-model="item.officeName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申报工时">
                <el-input-number v-model="item.workHour" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="申报内容">
                <el-input v-model="item.workRemark" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核状态">
                <el-input v-model="item.fillStateName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核人员">
                <el-input v-model="item.checkBy" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { myFill, myPro, view } from '@/api/work/record'

export default {
  name: 'Record',
  data() {
    return {
      // 查询参数
      queryParams: {},
      // 填报时间
      fillDate: '',
      // 遮罩层
      loading1: false,
      loading2: false,
      // 我的填报
      resList1: [],
      // 我参加的项目
      resList2: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: [],
      // 日期选择选项
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          },
          {
            text: '二周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 14)
              picker.$emit('pick', date)
            }
          },
          {
            text: '三周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 21)
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    /** 初始化 */
    init() {
      this.getList1()
      this.getList2()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList1()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.fillDate = ''
      this.queryParams = {}
      this.handleQuery()
    },
    /** 我的填报 */
    getList1() {
      this.loading1 = true
      if (this.fillDate) {
        this.queryParams.fillDate = this.fillDate.toString()
      }
      myFill(this.queryParams).then((response) => {
        this.resList1 = response.data
        this.loading1 = false
      })
    },
    /** 我参加的项目 */
    getList2() {
      this.loading2 = true
      myPro().then((response) => {
        this.resList2 = response.data
        this.loading2 = false
      })
    },
    /** 我的填报-查看详情 */
    handleView(row) {
      if (row.workHour > 0) {
        view(row).then((response) => {
          this.form = response
          this.open = true
          this.title = '查看 ' + row.fillDate + ' 详情'
        })
      } else {
        this.$message.error('提示：日期 ' + row.fillDate + row.fillState)
      }
    },
    /** 我的填报-提交工时 */
    handleEdit(row) {
      if (row.workHour > 0) {
      } else {
        this.$message.error('提示：日期 ' + row.fillDate + row.fillState)
      }
    }
  }
}
</script>
